<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // this 是谁: 谁调用就是谁
        // 看不出来谁调用, 一般是 window

        // 全局的变量都相当于添加给了window对象
        // 鸿蒙中没有这个对象
        function sayHi() {
            console.log('sayHi:', this)
        }
        sayHi()

        // 能够看出来谁调用
        const person = {
            name: '小李子',
            film: ['jump together'],
            skill: '不抗冻, 不要跳冰水',
            // 给对象设置一个方法
            sayHi() {
                console.log(this)
            },
            sayHello: () => {
                console.log('sayHello', this)
            },
            sayHiPlus() {
                console.log('sayHiPlus', this)
                // setTimeout(function () {
                //     console.log('sayHiPlus', this) // 这个 this 是什么?
                // }, 1000)
                setTimeout(() => {
                    console.log('sayHiPlus', this) // 这个 this 又是什么?
                }, 1000)
            }
        }
        // person点的, this 中目前是 person
        person.sayHi()
        // sayHello 绑定的是 箭头函数
        // 箭头函数: 创建时会绑定当前作用域中的 this, 如果有的话
        // 当前作用域没有 this, 向上一级去找
        // 如果全局作用域中仍没有找到, 则绑定 window 对象
        // 常见的作用域: 函数作用域, 块级作用域, 模块作用域, 全局作用域
        person.sayHello()


        // 面试话术:
        /*
        聊到了 this, 聊到了箭头函数, 聊到了坑点, 怎么回答?
        this 这个东西在 JS 和 TS 中都很灵活, 因为会动态的改变, 但是有一些记忆的规则:
        谁调用就是谁, 看不出来谁调用, 一般是全局对象, 如果是在浏览器中, 这个对象是 window.
        也有特殊情况, 如箭头函数, 创建的时候 this 就绑定了, 绑定的是上一级作用域中的 this, 比如函数作用域, 块级作用域, 模块作用域, 全局作用域.
        箭头函数在鸿蒙开发中经常需要使用, 因为如果不指定 this 可能出现执行错误的问题, 导致无法正确取值, 在buildParams 中, 或者子组件通过回调函数传递数据给父组件, 需要通过箭头函数, 这两个是比较常见的, 我也掉过坑.
        在 js 中早期还是一些更灵活的写法, 比如 call, apply, bind, 但是有了箭头函数之后一般不需要使用他们了.
        */
    </script>
</body>
</html>